<!-- 模态弹窗 开始  -->
<!-- TODOS  -->
<div class="modal fade bd-TODOS-modal-lg" tabindex="-1" role="dialog" aria-labelledby="TODOSLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" i> <span data-toggle="tooltip" data-placement="top">TODOS</span></h4>
      </div>
      <div class="modal-body">
               <div class="row" style="max-height:500px;overflow: scroll;">
                  <div class="col-sm-3">
                    <!-- inspired by github -->
                    <a href="#" data-toggle="tooltip" data-placement="bottom" title="头像：苏伟明" style="display:block;">
                      <img  src="https://avatars0.githubusercontent.com/u/8148277?v=3&s=460" alt="..." class="img-thumbnail">
                    </a>
                    <h4>ByteSu</h4>
                    <ul class="list-unstyled">
                      <li>邮箱：byte_su@163.com</li>
                      <li>加入：2016－01-22</li>
                    </ul>
                    <br>
                    <br>
                    <br>
                    <br>
                  </div>
                  <div class="col-sm-9">
                    <ul class="nav nav-tabs">
                      <li class="nav-item">
                        <a href="#" class="nav-link active">进行中</a>
                      </li>
                      <li class="nav-item">
                        <a href="#" class="nav-link">规划中</a>
                      </li>
                      <li class="nav-item">
                        <a href="#" class="nav-link">已完成</a>
                      </li>
                      <li class="nav-item disabled">
                        <a href="#" class="nav-link">已归档</a>
                      </li>
                    </ul>
                    <br>
                   <div class="card card-block">
                     <h5 class="card-title">要读书单</h5>
                     <p class="card-text">规划要读的书.</p>
                     <a href="#" class="btn btn-primary-outline btn-sm">查看</a>
                   </div>
                   <div class="card card-block">
                     <h5 class="card-title">要读书单</h5>
                     <p class="card-text">规划要读的书.</p>
                     <a href="#" class="btn btn-primary-outline btn-sm">查看</a>
                   </div>
                   <div class="card card-block">
                     <h5 class="card-title">要读书单</h5>
                     <p class="card-text">规划要读的书.</p>
                     <a href="#" class="btn btn-primary-outline btn-sm">查看</a>
                   </div>
                   <div class="card card-block">
                     <h5 class="card-title">要读书单</h5>
                     <p class="card-text">规划要读的书.</p>
                     <a href="#" class="btn btn-primary-outline btn-sm">查看</a>
                   </div>
                   <div class="card card-block">
                     <h5 class="card-title">要读书单</h5>
                     <p class="card-text">规划要读的书.</p>
                     <a href="#" class="btn btn-primary-outline btn-sm">查看</a>
                   </div>
                  </div>

        </div>
      </div>
    </div>
  </div>
</div>

<!-- 模态弹窗 结束 -->
